<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>商品库存</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_sn23o5jxipg.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
		<link rel="stylesheet" href="js/layer/mobile/need/layer.css" />
		<link rel="stylesheet" href="css/caiStyle.css" />
		<link rel="stylesheet" href="css/dingdan.css" />
	</head>
	<body>
		<div class="container-fluid bg-white">
			<!-- 订单列表 -->
			<div class="order order-box">
				<div class="ood-box">
					<!-- 顶部工具条 -->
					<nav class="flex">
						<!-- 默认显示的操作栏 -->
						<div class="dutault-nav width100 flex">
							<div class="heard-left width100 flex">
								<div class="col-md-2 nav-tab-box nav-tab-box1 padding-0">
									<div class="sle-box"><span class="changeSelectData">全部分类</span><i class="iconfont icon-xiangxia"></i></div>
									<div onclick="closeMain()" class="show-sle-box show-sle-box1">
										<div class="show-sle show-sle1">
											<ul class="mp00">
												<li class="list-none">全部分类</li>
												<li class="list-none food">食品饮料</li>
												<ul class="second">
														<li class="list-none">巧克力</li>
														<li class="list-none">坚果</li>
														<li class="list-none">肉干</li>
												</ul>
												<li class="list-none">母婴用品</li>
												<li class="list-none">个护化妆</li>
												<li class="list-none">汽车用品</li>
												<li class="list-none">家居家纺</li>
											</ul>
										</div>
										
									</div>
								</div>
								<div class="col-md-1 warehouse-state padding-0">
									<div class="sle-box" ><span class="changeSelectData1">深圳仓</span><i class="iconfont icon-xiangxia"></i></div>
									<div onclick="warehouse()"  class="show-sle-state show-sle-state1">
										<div class="show-sle show-sle2">
											<ul class="mp00">
												<li class="list-none">全部仓库</li>
												<li class="list-none">深圳仓</li>
												<li class="list-none">上海仓</li>
												<li class="list-none">北京仓</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="col-md-4 padding-0 flex">
									<i class="iconfont icon-search"></i>
									<input type="text" class="layui-input secrh" placeholder="请输入订单号/经销商名称" value="" />
									<span class="gjss" title="点击进行高级搜索">高级搜索</span>
								</div>
							<div class="heard-right heard-btn col-md-6 padding-0 flex rightFloat">
								<button type="button">导出</button>
								<button type="button" onclick="window.top.openViewPage('kcpd.html')",'商品库存','库存盘点'>库存盘点</button>
							</div>
						</div>
						<!-- 选择订单后显示操作栏 -->
						<div class="caozuo-nav hidden flex">
							<div class="nav-item"><i class="iconfont icon-guanbi hidden"></i>已选择<span class="changeNum">30</span>项</div>
							<div class="nav-item" onclick="upperShelf()"><i class="iconfont icon-shangjia"></i>上架</div>
							<div class="nav-item" onclick="lowerShelf()"><i class="iconfont icon-xiajia"></i>下架</div>
							<div class="nav-item" onclick="remove()"><i class="iconfont icon-chuku"></i>删除</div>
							<div class="nav-item"><i class="iconfont icon-bq"></i>设置标签</div>
						</div>
					</nav>
					<!-- 数据列表 -->
					<div class="order-list">
						<table id="order-list" lay-filter="test"></table>
					</div>
				</div>
			</div>
			
			<!-- 新增订单 -->
			<div class="order hidden add-order">
				
			</div>
			
			<!-- 导入订单 -->
			<div class="order hidden import-order">44</div>
			
			<!-- 高级搜索弹出层 -->
			<div class="advanced-search-model hidden">
				<div class="closeSm"></div>
				<div class="sm-box gs-box">
					<form class="layui-form">
						<div class="gs-box-item">
							<div class="title">高级搜索</div>
							<div class="form-box">
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title">订货单号</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">经销商名称</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">收货信息</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">商品信息</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box">
										<span class="title">业务员</span>
										<div @click="handSelect" class="form-controls bg-white">
											<span>{{checkSelcet}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite" v-if="showSelcet">
												<ul class="mp00">
													<li v-for="(item,index) in selectList" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								
								<div class="col-md-6 padding-0">
									<div class="fb-box"><span class="title">下单时间</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">经销商级别</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">归属部门</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="fb-box"><span class="title">制单人</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								<div class="col-md-12 padding-0">
									<div class="fb-box">
										<span class="title">下单时间</span>
										<div class="chckebox-list">
											<input type="checkbox" id="c_all" lay-filter="c-all" lay-skin="primary" title="全部">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="待订单审核" title="待订单审核">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="待财务审核" title="待财务审核">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="待出库审核" title="待出库审核">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="待发货确认" title="待发货确认">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="待收货确认" title="待收货确认">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="已完成" title="已完成">
											<input type="checkbox" class="typev" lay-filter="c-one" lay-skin="primary" value="已作废" title="已作废">
										</div>
									</div>
								</div>
							</div>
						</div>
						
						<div class="footer-buttom">
							<button @click="closegjss" class="closegjss" type="button">取消</button>
							<button type="button">确定</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		<!--修改-->
		<div id="modify">
			<div class="form-box">
				<div class="mui-col-xs-12 padding-0">
					<div class="fb-box"><span class="title">库存上限</span><input type="text" class="form-controls" name="" id="" value="" /></div>
					<div class="fb-box"><span class="title">库存下限</span><input type="text" class="form-controls" name="" id="" value="" /></div>
				</div>
			</div>
		</div>
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs " lay-event="edit" id="test2">修改</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs">明细</a>
	  </script>
		<script type="text/javascript">
			//修改的询问框
			$(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-67)+"px"})
			})
			

			//确认上架的询问框
		function	upperShelf(){
			layer.open({
			  type: 5,
			  area: ['300px', '200px'],
			  content: "确认批量上架？",//数组第二项即吸附元素选择器或者DOM
			  btn:["取消","确认"]
			});  
		}
		//确认下架的询问框
		function  lowerShelf(){
			layer.open({
			  type: 5,
			  area: ['300px', '200px'],
			  content: "确认批量下架？",//数组第二项即吸附元素选择器或者DOM
			  btn:["取消","确认"]
			});  
		}
		function remove(){
			layer.open({
			  type: 5,
			  area: ['300px', '200px'],
			  content: "确认批量删除商品？",//数组第二项即吸附元素选择器或者DOM
			  btn:["取消","确认"]
			});  
		}
		
					$(".nav-tab-box .sle-box").click(function(){
				$(this).next().slideToggle(100)
			})
		
			$(".warehouse-state .sle-box").click(function(){
				$(this).next().slideToggle(100)
			})
			function state(){
				$(".warehouse-state .show-sle-state").slideToggle(100)
			}
			//全部分类的显示隐藏
			function closeMain(){
				$(".nav-tab-box .show-sle-box1").slideToggle(100)
			}
			//获取全部分类子目录的值
			$(".nav-tab-box .show-sle-box1 .list-none").click(function(){
				$(".sle-box .changeSelectData").text($(this).text())
			})
			
			//仓库的子目录显示隐藏
			function warehouse(){
				$(".show-sle-state1").slideToggle(100)
			}
			//获取仓库的子目录的值
			$(".show-sle-state .show-sle2 .list-none").click(function(){
				$(".sle-box .changeSelectData1").text($(this).text())
			})
			//
			
			 $(".food,.second").mousemove(function(){
    		$(".second").css("display","block");
 			 });
			 $(".food,.second").mouseout(function(){
    		$(".second").css("display","none");
 			 });
			function showTabMain(num){
				if(num > 0){
					$(".heard-left").addClass("hidden")
					$(".caozuo-nav").removeClass("hidden")
				}else{
					$(".heard-left").removeClass("hidden")
					$(".caozuo-nav").addClass("hidden")
				}
				
				$(".changeNum").text(num)
			}
			
			
			//显示高级搜索
			$(".gjss").click(function(){
				$(".advanced-search-model").removeClass("hidden")
			})
			
			//确认批量删除商品
			function remove(){
			layer.open({
			  type: 5,
			  area: ['300px', '200px'],
			  content: "确认批量删除商品？",//数组第二项即吸附元素选择器或者DOM
			  btn:["取消","确认"]
			});  
		}
			var vm = new Vue({
				el:".gs-box",
				data:{
					base64Url:"",
					checkSelcet:"汽车用品",
					showSelcet:false,
					selectList:[
						{
							name:"汽车用品",
							value:"1"
						},
						{
							name:"手机数码",
							value:"2"
						},
						{
							name:"食品酒水饮料",
							value:"3"
						},
						{
							name:"电子机电",
							value:"4"
						},
						{
							name:"家用电器",
							value:"5"
						},
						{
							name:"个护化妆品",
							value:"6"
						},
						{
							name:"钟表珠宝",
							value:"7"
						},
						{
							name:"家具家装",
							value:"8"
						},
						{
							name:"服装鞋帽箱包",
							value:"9"
						},
						{
							name:"日用百货",
							value:"10"
						},
						{
							name:"母婴用品",
							value:"11"
						},
						{
							name:"生鲜农贸",
							value:"12"
						},
						{
							name:"餐饮连锁",
							value:"13"
						},
						{
							name:"医药行业",
							value:"14"
						},
						{
							name:"其他行业",
							value:"15"
						}
					]
				},
				mounted(){
					for (let i = 0;i<this.selectList.length;i++) {
						this.selectList[i].active = false;
					}
				},
				methods:{
					closegjss(){//隐藏高级搜索
						$(".advanced-search-model").addClass("hidden")
					},
					handSelect(){
						if(this.showSelcet){
							this.showSelcet = false;
						}else{
							this.showSelcet = true;
						}
					},
					checkSel(e,title,index){
						this.checkSelcet = title;
						for (let i = 0;i<this.selectList.length;i++) {
							if(i == index){
								this.selectList[i].active = true;
							}else{
								this.selectList[i].active = false;
							}
						}
					},
					
				}
			})
			
			layui.use(['form','table','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element
				
				
				//订单状态选择
				var orderList = [];
				//全选
				form.on('checkbox(c-all)', function(data){
					if(data.elem.checked){
						$(".typev").prop("checked",true)
						var item = $(".typev");
						for (var i = 0; i < item.length; i++) {
							if (item[i].checked == true) {
								orderList.push({
									id:i,
									name:item[i].value
								})
							}
						}
						form.render('checkbox');
					}else{
						$(".typev").prop("checked",false)
						form.render('checkbox');
					}
				}); 
				
				//单选
				form.on('checkbox(c-one)', function (data) {
					var item = $(".typev");
					for (var i = 0; i < item.length; i++) {
						if (item[i].checked == false) {
							$("#c_all").prop("checked", false);
							form.render('checkbox');
							break;
						}
					}
					//如果都勾选了  勾上全选
					var  all=item.length;
					for (var i = 0; i < item.length; i++) {
						if (item[i].checked == true) {
							console.log("2");
							all--;
						}
					}
					if(all==0){$("#c_all").prop("checked", true);form.render('checkbox');}
					
					//单选时取值
					if(data.elem.checked){
						orderList.push({
							id:"0",
							name:data.elem.value
						})
					}else{
						for(let i = 0;i<orderList.length;i++){
							if(orderList[i].name == data.elem.value){
								orderList.splice(i,1)
							}
						}
					}
				});
				//修改
				table.on('tool(test)', function(obj){
					if(obj.event == 'edit'){
						layer.open({
							type: 5
							,title: "修改库存信息" //不显示标题栏
							,area:['500px','300px']
							,shade: 0.5
							,id: 'LAY_layuipro' //设定一个id，防止重复弹出
							,shadeClose:true
							,btn: ['取消','确定']
							,content:$("#modify").html()
						});
					}
				});
				
				//获取列表选中行
				table.on('checkbox()', function(obj){
					var data = table.checkStatus('order-list').data.length;
					showTabMain(data)
				});
				
				// 数据列表渲染
				table.render({
					elem: '#order-list'
					,data:DataArray2// data为数据库查到的数据
					,height:500
					,cols: [[//以下field字段为为数据库相同,title为字段描述
					{field:'pwd', width:180, title: '商品名称', sort: true,}
						,{field:'uname', width:130, title: '商品规格'}
						,{field:'sex', width: 130, title: '单位'}
						,{field:'rank', width:130, title: '所属仓库'}
						,{field:'uptime', width:110, title: '库存上限',}
						,{field:'exptime', width:130, title: '库存下限',}
						,{field:'money', width:100, title: '预购量', sort: true}
						,{field:'email', width:100, title: '在途量',}
						,{field:'scores', width:100, title: '库存量', sort: true}
						,{field:'matt', width:100, title: '可用库存量', sort: true}
						 ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:115}
					]]
					,page: true
				});
				
				//监听行单击事件
				table.on('row(test)', function(obj){
				  console.log(obj.tr) //得到当前行元素对象
				  console.log(obj.data) //得到当前行数据
				  //obj.del(); //删除当前行
				  //obj.update(fields) //修改当前行数据
//				  window.open('ddxq.html?data='+obj.data, '_self');
				});
			});
			
			
			//列表的操作
			
		</script>
	</body>
</html>
